<template>
	<view class="userInfo">
		<view class="user-info-section">
			<view class="user-avatar-section">
				<image class="user_avatar" :src="userInfoData.avatar"></image>
			</view>
			<button class="choose-avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">更换头像</button>
			<view class="user-details">
				<view class="user-detail" @tap="editField('nickname')">
					<view class="detail-title">昵称:</view>
					<view class="detail-value">{{ userInfoData.nickname }}</view>
				</view>
				<view class="user-detail" @tap="bindPhone">
					<view class="detail-title">手机号:</view>
					<view class="detail-value">{{ getPhone(userInfoData.phone) }}</view>
				</view>
				<view class="user-detail" @tap="bindEmail">
					<view class="detail-title">邮箱:</view>
					<view class="detail-value">{{ getEmail(userInfoData.email) }}</view>
				</view>
				<view class="user-detail" @tap="editField('sex')">
					<view class="detail-title">性别:</view>
					<view class="detail-value">{{ userInfoData.sex }}</view>
				</view>
			</view>
			<button class="logout-btn" @tap="logout">退出登录</button>
		</view>
	</view>

	<!-- UniPopup for editing -->
	<uni-popup ref="popup" borderRadius="10px 10px 0 0" type="bottom" background-color="#fff">
		请修改：
		<input class="popup-input" type="text" v-model="editingField" placeholder="请输入内容">
		<button class="popup-button" @tap="saveEdit" type="primary">保存</button>
	</uni-popup>
</template>

<script setup lang="ts">
import { type Ref, reactive, ref } from 'vue';
import { type User } from '/@/types/member';
import { updateUser } from '../../services/mine';
import { onLoad } from '@dcloudio/uni-app';
import { useMemberStore } from '../../stores';
const memberStore = useMemberStore()
let { userInfo }: { userInfo: User } = memberStore.profile;
onLoad(
	() => {
		userInfoData.value = userInfo;
		console.log(memberStore.profile)
	})
const userInfoData = ref<User>({});

const getPhone = (phone: string) => {
	if (phone) {
		return phone.slice(0, 3) + '****' + phone.slice(7);
	} else {
		return '绑定手机号'
	}
}
const getEmail = (email: string) => {

	if (email) {
		return email.slice(0, 3) + '****' + email.slice(7);
	} else {
		return '绑定邮箱'
	}
}
const bindPhone = () => {
	if (!userInfo.phone) {
		uni.navigateTo({
			url: '/pages/mine/phone'
		})
	}

}
const bindEmail = () => {
	if (!userInfo.email) {
		uni.navigateTo({
			url: '/pages/mine/email'
		})
	}

}


const logout = () => {
	uni.showModal(
		{
			title: '确定退出登录吗？',
			success: (res) => {
				if (res.confirm) {
					memberStore.clearProfile();
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			}
		}
	)

}
let filed1 = ref('');
const onChooseAvatar = (event: any) => {
	userInfoData.value.avatar = event.detail.avatarUrl;
	userInfo.avatar = event.detail.avatarUrl
	let base64 = wx.getFileSystemManager().readFileSync(event.detail.avatarUrl, 'base64')
	let toBase64Url = 'data:image/jpeg;base64,' + base64;
	updateUser({
		userId: userInfo.userId,
		avatar: toBase64Url
	})
}
const editingField = ref<string>('');
const popup = ref(null)
const editField = (field: string) => {
	filed1.value = field
	editingField.value = userInfoData.value[field];
	popup.value.open('bottom');
};

const saveEdit = () => {
	userInfoData.value[filed1.value] = editingField.value;
	switch (filed1.value) {
		case 'nickname':
			userInfo.nickname = editingField.value;
			updateUser(
				{
					userId: userInfo.userId,
					nickname: editingField.value
				});
			break;
		case 'sex':
			userInfo.sex = editingField.value;
			updateUser(
				{
					userId: userInfo.userId,
					sex: editingField.value
				});
			break;
	}

	popup.value.close(); // Close the popup after saving
};
</script>

<style scoped>
.userInfo {
	padding: 20px;
	background-color: #f4f4f4;
}

.user-info-section {
	background: #fff;
	border-radius: 10px;
	padding: 15px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.user-avatar-section {
	margin-bottom: 15px;
}

.user_avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #ddd;
}

.choose-avatar-btn {
	margin-top: 10px;
	background-color: #007bff;
	color: #fff;
	border-radius: 5px;

	border: none;
}

.user-details {
	width: 100%;
}

.user-detail {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid #ddd;
	cursor: pointer;
}

.detail-title {
	font-weight: bold;
}

.detail-value {
	color: #555;
}

.logout-btn {
	margin-top: 20px;
	background-color: #dc3545;
	color: #fff;
	border-radius: 5px;

	border: none;
}

.uni-popup .popup-input {
	border-radius: 6px;
	margin: 28px 10px;
	background-color: #e4e4e3;
	padding-left: 16px;
	height: 40px;
}

.uni-popup .popup-button {
	background-color: #007bff;
	color: #fff;
	border-radius: 37px;

	width: 300px;
}
</style>